<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/Map.js"></script>
<script type="text/javascript" src="./js/SuggestPanel.js"></script>
</head>
<body>
	<form>
		<input type="button" value="send" id="btn"></input> <input type="text"
			id="rp"></input>
		<div id="content"></div>

	</form>
</body>
<script>
	(function() {

		var sp = new SuggestPanel("content");
		var rp = document.getElementById("rp");
		var firsttime = 0;
		rp.onkeyup = function() {
			var now = new Date();
			var secondtime = now.getTime();

			var timedifference = secondtime - firsttime;
			alert(timedifference);
			if (timedifference > 2000) {
				var query = rp.value;
				var xhr = new XMLHttpRequest();
				var url = "AjaxServlet?rp=" + rp.value;

				if (sp.hasCache(query)) {
					sp.showFromCache(query);
				} else {
					xhr.onreadystatechange = function() {
						sp.clear();

						if (xhr.readyState == 4 && xhr.status == 200) {
							var result = xhr.responseText;
							var list = JSON.parse(result);
							sp.spData = list;
							sp.show();
							sp.cache(query, list);
						}
					}

					xhr.open("GET", url, true);
					xhr.send();
				}
			}
			firsttime = now.getTime();
		}

	})()
</script>
</html>